<template>
  <div>
    <button class="start" type="button" @touchstart="handleTouchStart" @touchend="handleTouchEnd">长按说话</button>
    <div class="h444">录音时长：{{ recorder.duration.toFixed(4) }}</div>
    <button class="h444" @click="downloadWAVRecordAudioData">下载WAV录音文件</button>
    <div class="zezhao" v-if="isShow">


    </div>
    <!-- <br />
    <el-button type="button" @click="getPCBRecordAudioData"
      >获取PCB录音数据</el-button
    >
    <el-button type="button" @click="downloadPCBRecordAudioData"
      >下载PCB录音文件</el-button
    >
    <el-button type="button" @click="getWAVRecordAudioData"
      >获取WAV录音数据</el-button
    >
    <el-button type="button" @click="downloadWAVRecordAudioData"
      >下载WAV录音文件</el-button
    >
    <el-button type="button" @click="uploadWAVData">上传WAV录音数据</el-button>
    <br /> -->
  </div>
</template>

<script>
import Recorder from "js-audio-recorder";
// import { uploadWavData } from "@/api/system/audioRecorder";
export default {
  name: "audioRecorder",
  data() {
    return {
      recorder: new Recorder({
        audio_type: 'mp3',
        sampleRate: 44100, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
        bitRate: 128 // 设置比特率
      }),
      isShow:false
    };
  },
  mounted() {
    Recorder.getPermission().then(
      () => {
        console.log("开始录音");
        // this.recorder.start(); // 开始录音
      },
      (error) => {
        this.$message({
          message: "请先允许该网页使用麦克风",
          type: "info",
        });
        console.log(`${error.name} : ${error.message}`);
      }
    );
  },
  methods: {
    handleTouchStart(event) {
      // 触摸开始时的处理逻辑
      Recorder.getPermission().then(
        () => {
          console.log("开始录音");
          this.recorder.start(); // 开始录音
          this.isShow = true
        },
        (error) => {
          this.$message({
            message: "请先允许该网页使用麦克风",
            type: "info",
          });
          console.log(`${error.name} : ${error.message}`);
        }
      );
    },
    handleTouchEnd(event) {
      // 触摸结束时的处理逻辑
	  this.isShow = false
      this.recorder.stop();
      setTimeout(()=>{
        this.recorder.play();
      },500)
    },
    //获取PCB录音数据
    getPCBRecordAudioData() {
      var pcmBlob = this.recorder.getPCMBlob();
      console.log(pcmBlob);
    },
    //获取WAV录音数据
    getWAVRecordAudioData() { 
      var wavBlob = this.recorder.getWAVBlob();
      console.log(wavBlob);
    },
    //下载PCB录音文件
    downloadPCBRecordAudioData() {
      this.recorder.downloadPCM("badao");
    },
    //下载WAV录音文件
    downloadWAVRecordAudioData() {
      this.recorder.downloadWAV("badao");
    },
    // //上传wav录音数据
    // uploadWAVData() {
    //   var wavBlob = this.recorder.getWAVBlob();
    //   // 创建一个formData对象
    // var formData = new FormData()
    //   // 此处获取到blob对象后需要设置fileName满足当前项目上传需求，其它项目可直接传把blob作为file塞入formData
    //   const newbolb = new Blob([wavBlob], { type: 'audio/wav' })
    //   //获取当时时间戳作为文件名
    //   const fileOfBlob = new File([newbolb], new Date().getTime() + '.wav')
    //   formData.append('file', fileOfBlob)
    //   uploadWavData(formData).then((response) => {
    //     console.log(response);
    //   });
    // },
  },
  watch: {},
};
</script>

<style scoped lang="scss">
  .start{
    width: 150px;
    height: 50px;
    background-color: blue;
    color: #fff;
    text-align: center;
    line-height: 50px;
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 25px;
    display: block;
    user-select: none;
    z-index: 99;
  }
  .h444{
    user-select: none;
  }
  .zezhao{
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .3);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 98;
  }
</style>
